<!--
 * @Description:
 * @Author: hui
 * @Date: 2022-02-18 10:58:56
 * @LastEditTime: 2022-03-31 09:28:26
-->
<template>
	<div class="panel">
    <div class="header">
      <div class="title">{{ props.title }}</div>
      <div class="note">{{ props.note }}</div>
    </div>
    <div class="panel-body">
      <el-table :data="props.tableData" style="width: 100%">
        <el-table-column prop="enterpriseName" label="企业名称" min-width="150" />
        <el-table-column prop="industry" label="所属行业" min-width="100" />
        <el-table-column prop="evaluation" label="碳评价" min-width="130">
          <template #default="scope">
            <el-rate v-model="scope.row.evaluation" :disabled="true" />
          </template>
        </el-table-column>
        <el-table-column prop="value" label="碳价值">
          <template #default="scope">
            <span :class="{'up': scope.row.tag + '' === '1', 'down': scope.row.tag + '' === '0'}">{{ scope.row.value }}</span>
            <el-icon v-if="scope.row.tag + '' === '1'"><CaretTop style="color: #04B78A;" /></el-icon>
            <el-icon v-else><CaretBottom style="color: #FA5087;" /></el-icon>
          </template>
        </el-table-column>
      </el-table>
    </div>
	</div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
const props = defineProps(['tableData', 'title', 'note'])
console.log('props====', props, props.tableData)

</script>

<style lang="scss" scoped>
.panel {
  // height: 359px;
  padding: 0 20px;
  background: #FFFFFF;
  box-shadow: 0px 2px 4px 0px rgba(28,41,90,0.04);
  border-radius: 10px;
  // border: 1px solid #EAEDF7;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .title {
    padding: 20px 0;
    font-size: 26px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #242F57;
    line-height: 1em;
  }
  .note {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #97A0C3;
  }
  .panel-body {
    display: flex;
    // .panel-item {
    //   &:nth-child(1) {
    //     width: 30%;
    //   }
    //   &:nth-child(2) {
    //     width: 35%;
    //   }
    //   &:nth-child(3) {
    //     width: 35%;
    //   }
    //   .chart {
    //     margin-top: 5%;
    //     margin-right: 5%;
    //     height: 220px;
    //     background: #FFFFFF;
    //     box-shadow: 0px 2px 4px 0px rgba(28,41,90,0.04);
    //     border-radius: 10px;
    //     border: 1px solid #EAEDF7;
    //   }
    //   h3 {
    //     font-size: 18px;
    //     font-family: PingFangSC-Regular, PingFang SC;
    //     font-weight: 400;
    //     color: #636E95;
    //   }
    //   .list {
    //     display: flex;
    //     flex-wrap: wrap;
    //     align-items: center;
    //     .item {
    //       display: flex;
    //       align-items: center;
    //       width: 45%;
    //       box-sizing: border-box;
    //       margin-right: 5%;
    //       margin-top: 5%;
    //       height: 96px;
    //       background: #FFFFFF;
    //       border-radius: 10px;
    //       border: 1px solid #EAEDF7;
    //       .img-icon {
    //         width: 48px;
    //         height: 48px;
    //         background: #DAF7F0;
    //         border-radius: 10px;
    //         margin: 0 10px 0 20px;
    //         text-align: center;
    //         .icon {
    //           width: 24px;
    //           height: 24px;
    //           margin-top: 12px;
    //         }
    //       }
    //       .content {
    //         h4 {
    //           font-size: 14px;
    //           font-family: PingFangSC-Semibold, PingFang SC;
    //           font-weight: 600;
    //           color: #97A0C3;
    //           line-height: 24px;
    //         }
    //         .value {
    //           font-size: 18px;
    //           font-family: PingFangSC-Semibold, PingFang SC;
    //           font-weight: 600;
    //           color: #242F57;
    //           line-height: 24px;
    //           &.up {
    //             color: #04B78A;
    //           }
    //           &.down {
    //             color: #FA5087;
    //           }
    //         }
    //       }
    //     }
        
    //   }
    // }
  }
}
.up {
  color: #04B78A;
}
.down {
  color: #FA5087;
}
</style>
